<!--
 * @Description: 
 * @Author:
 * @Date: 2023-03-26 15:27:05
-->
<template>
<div style="margin-top: 10px;width: 50%;margin: 10px auto;background-color: white;text-align: center">
  <table style="margin: 20px auto">
    <tr>
      <th>订单号</th>
      <td>{{orderNo}}</td>
    </tr>

    <tr>
      <th>金额</th>
      <td>{{money}} 元</td>
    </tr>

  </table>
  <hr style="width: 280px" />
  <div>
    <span>支付方式：</span>
  </div>
  <br>
  <img src="../../../assets/img/微信支付.png" style="width: 45px;height: 45px;margin-right: 60px;cursor:pointer;" @click="pay">
  <img src="../../../assets/img/支付宝.png" style="width: 50px;height: 50px;cursor:pointer;" @click="pay">
</div>
</template>

<script>
export default {
  name: "Pay",
  data(){
    return{
      userId: 0,
      money1: 0,
      orderNo: '',
    }
  },
  created() {
    this.money = parseFloat(this.$route.query.money).toFixed(2);
    this.orderNo = this.$route.query.orderNo;
  },

  methods:{
    pay(){
      this.request.get("/api/order/paid/"+this.orderNo).then(res=>{
        if(res.code==='200'){
          alert("您成功支付"+this.money+"元")
          this.$router.replace("/orderlist")
        }else{
          this.$message.error(res.msg)
        }
      })

    }
  }

}
</script>

<style scoped>
.pay-container {
  margin: 30px auto;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  padding: 32px 24px 24px 24px;
  text-align: center;
}
.pay-table {
  margin: 0 auto 20px auto;
  width: 100%;
  max-width: 320px;
  font-size: 16px;
}
.pay-table th {
  text-align: right;
  color: #888;
  font-weight: 500;
  padding-right: 10px;
}
.pay-table td {
  text-align: left;
  color: #222;
  font-weight: 600;
}
.pay-divider {
  width: 80%;
  margin: 20px auto;
  border: none;
  border-top: 1px solid #eee;
}
.pay-title {
  font-size: 22px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 18px;
}
.pay-methods {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 20px 0 10px 0;
}
.pay-method-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.15);
}
.pay-method-btn img {
  width: 36px;
  height: 36px;
}
.pay-method-btn:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  transform: translateY(-2px) scale(1.08);
}
@media (max-width: 600px) {
  .pay-container {
    padding: 16px 4px;
    max-width: 98vw;
  }
  .pay-methods {
    gap: 20px;
  }
}
</style>